<template>
    <el-row :gutter="16" class="i-page org-page fill-height">
        <el-col :span="6">
            <div class="i-content fill-height">
                <el-tree :data="api.treeState.tree" :expand-on-click-node="false" :props="{label:'name'}" highlight-current node-key="id" @node-click="(e)=>api.onTreeClick(e)"></el-tree>
            </div>
        </el-col>
        <el-col :span="18">
            <div class="i-content white pa-0 d-flex flex-column">
                <el-space :alignment="'stretch'" direction="horizontal" fill size="large">
                    <el-space>
                        <el-button plain type="primary" @click="api.onCreate()">创建</el-button>
                    </el-space>

                    <el-table
                            :data="api.tableState.dataSource"
                            border
                    >
                        <el-table-column label="名称" prop="name"/>

                        <el-table-column :width="64" label="排序" prop="sort"/>

                        <el-table-column :width="200" label="创建时间" prop="createTime"/>

                        <el-table-column :align="'center'" fixed="right" label="操作" width="240">
                            <template #default="{ row, column, $index }">
                                <el-space>
                                    <el-button size="small" text type="primary" @click="api.onDetail(row.id)">详情</el-button>
                                    <el-button v-if="row.parentId !== '0'" size="small" text type="primary" @click="api.onEdit(row.id)">编辑</el-button>
                                    <el-button size="small" text type="danger" @click="api.onDelete(row.id)">删除</el-button>
                                </el-space>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="d-flex justify-end">
                        <el-pagination
                                v-model:current-page="api.tableState.pagination.current"
                                v-model:page-size="api.tableState.pagination.pageSize"
                                :total="api.tableState.pagination.total"
                                background
                                layout="total, sizes, prev, pager, next, jumper"
                                @size-change="api.refreshTable()"
                                @current-change="api.refreshTable()"
                        />
                    </div>
                </el-space>

            </div>
        </el-col>

        <Create :api="api"/>
        <Edit :api="api"/>
        <Detail :api="api"/>

    </el-row>
</template>

<script lang="ts" setup>

import {OrgApi} from "~/api/system/org/org.api";
import {onMounted} from "vue";
import Create from "~/views/system/org/Create.vue";
import Edit from "~/views/system/org/Edit.vue";
import Detail from "~/views/system/org/Detail.vue";

const api = new OrgApi(true);

onMounted(() => {
    api.onListPage();
});
</script>

<style lang="scss" scoped>

</style>
